<!-- 权限树 -->
<template>
  <div class="permission-tree">
    <div class="tree-permission-table-head">
      <div class="vm head-2">菜单</div>
      <div class="vm head-8">操作权限</div>
    </div>
    <el-tree class="tree-table" :data="tree" :props="treeProps" :show-checkbox="isCheckbox" :node-key="treeProps.valueKey" default-expand-all :expand-on-click-node="false" @check="treeCheck" ref="permissionTree" :default-checked-keys="defaultChecked">
    </el-tree>
  </div>
</template>
<script>

export default {
  name: 'PermissionTree',
  props: {
    value: { // 双向绑定字符串
      type: String,
      default: ''
    },
    tree: { // 树数据
      type: Array,
      default () {
        return []
      }
    },
    treeProps: {
      type: Object,
      default () {
        return {
          valueKey: 'menuId',
          label: 'menuName'
        }
      }
    },
    isCheckbox: {
      type: Boolean,
      default: true
    },
    isCheckAll: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkedList: [],
      pIdList: [],
      childIds: []
    }
  },
  computed: {
    treeValue () {
      if (this.value) {
        return this.value.split(',').filter(i => i)
      } else {
        return []
      }
    },
    defaultChecked () {
      if (this.isCheckAll) {
        this.setCheckedList()
        return this.childIds
      } else {
        const arr = this.treeValue.filter(i => this.childIds.includes(i))
        // this.checkedList = arr    //语法会报错
        this.$set(this, 'checkedList', arr)
        return arr
      }
    }
  },
  watch: {
    tree (val) {
      console.log(val, 'cval')
      this.checkedList = []
      this.getTreeId(val)
    }
  },
  created () { },
  mounted () { },
  methods: {
    getTreeId (list) {
      if (list && list.length > 0) {
        for (let len = list.length; len--;) {
          if (this.isCheckAll) {
            this.checkedList.push(list[len][this.treeProps.valueKey])
          }
          if (list[len].position !== '4') {
            this.pIdList.push(list[len][this.treeProps.valueKey])
          }
          if (list[len].children) {
            this.getTreeId(list[len].children)
          } else {
            this.childIds.push(list[len][this.treeProps.valueKey])
          }
        }
      }
    },
    treeCheck (obj, treeObj) {
      const checkedIds = treeObj.checkedKeys.concat(treeObj.halfCheckedKeys)
      this.checkedList = [...new Set(checkedIds)]
      this.setCheckedList()
    },
    setCheckedList () {
      const outValue = this.checkedList && this.checkedList.length > 0 ? this.checkedList.join(',') : ''
      this.$emit('input', outValue)
    }
  }
}
</script>
<style lang="scss">
.tree-permission-table-head {
  border: 1px solid #dcdfe6;
  border-bottom: none;
  background: #fafafa;
  font-weight: 500;
  .head-2 {
    text-indent: 1rem;
    width: 23%;
  }
  .head-8 {
    text-indent: 1rem;
    width: 76%;
  }
}
.tree-table {
  border: 1px solid #dcdfe6;
  border-bottom: none;

  .el-tree-node__content {
    height: auto;
    border-bottom: 1px solid #dcdfe6;
    align-items: baseline;
  }
}
.permission-tree {
  .el-tree-node__children {
    // 1
    .el-tree-node__children {
      // 2
      .el-tree-node {
        display: flex;
        border-bottom: 1px solid #dcdfe6;
      }
      .el-tree-node__content {
        border-bottom: 0px;
      }
      .el-tree-node__children {
        // 3
        height: auto;
        overflow: unset;
        white-space: normal;
        padding-right: 30px;
        .el-tree-node {
          display: inline-block;
          white-space: unset;
          border-bottom: 0px;
          .el-tree-node__content {
            border-bottom: 0px;
          }
          .el-tree-node__children {
            border-bottom: 0px;
          }
        }
      }
    }
  }
}
</style>
